<template>
  <div class="Header">
    <!-- Pc端适配 -->
    <div id="Header-pc">
      <div class="logo">
        <img src="@/assets/Article0.jpg" width="50px" height="50px" alt="Logo" />
      </div>
      <div class="middleBox"></div>
      <el-menu
        class="my-el-menu"
        mode="horizontal"
        :default-active="$route.path"
        @select="handleSelect"
        @open="handleOpen"
        :router="true"
      >
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/Strategy_Mail">策略商城</el-menu-item>
        <!-- <el-menu-item index="/Class">
                    量化课堂
        </el-menu-item>-->
        <el-menu-item index="/Community?pilot=">社区</el-menu-item>
        <!-- <el-menu-item index="/Mock_Trading">
                    模拟交易
        </el-menu-item>-->
        <el-menu-item index="/instruction">帮助</el-menu-item>
        <el-menu-item index="/Individual_Center">
          <div class="block">
            <el-avatar
              size="medium"
              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            ></el-avatar>
          </div>
        </el-menu-item>
      </el-menu>
      <div class="clear"></div>
    </div>
    <!-- 移动端端适配 -->
    <div id="Header-mobile">
      <div class="logo">
        <p>LOGO</p>
      </div>
      <div class="more" @click="handleMoreClick()">
        <i class="el-icon-s-fold"></i>
      </div>

      <transition
        appear
        enter-active-class="bounceInDown"
        leave-active-class="bounceOutUp"
        :duration="{enter:500,leave:1000}"
      >
        <ul class="animated application-list" v-if="application_list_visible">
          <li
            v-for="item in application_list"
            :key="item.id"
            @click="$router.push(item.router)"
          >{{item.name}}</li>
        </ul>
      </transition>
      <div class="clear"></div>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
export default {
  name: "Header",
  data() {
    return {
      application_list: [
        { name: "首页", id: 1, router: { path: "/" } },
        { name: "策略商城", id: 2, router: { path: "/Strategy_Mail" } },
        { name: "量化课堂", id: 3, router: { path: "/Class" } },
        {
          name: "社区",
          id: 4,
          router: { path: "/Community", query: { pilot: "" } }
        },
        { name: "模拟交易", router: { id: 5, path: "/Mock_Trading" } },
        { name: "帮助", id: 6, router: { path: "instruction" } },
        { name: "个人中心", id: 7, router: { path: "Individual_Center" } }
      ],
      application_list_visible: false
    };
  },
  mounted() {},
  methods: {
    handleSelect(key, keyPath) {
      console.log("handleSelect", key, keyPath);
    },
    handleOpen(index, indexPath) {
      console.log("handleOpen", index, indexPath);
    },
    handleMoreClick() {
      this.application_list_visible = !this.application_list_visible;
    }
  }
};
</script>
<style scoped>
.clear {
  clear: both;
}
/* pc端适配 */
@media screen and (min-width: 981px) {
  #Header-mobile {
    display: none;
  }
  #Header-pc {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 57px;
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;
  }
  .logo {
    float: left;
    width: 57px;
    height: 57px;
  }
  .logo p {
    line-height: 57px;
    margin-left: 20px;
    text-align: center;
    font-size: 24px;
    font-weight: border;
  }
  .my-el-menu {
    float: right;
    height: 57px;
    font-family: "PingFang SC";
    font-weight: bolder;
  }
}
/* 移动端适配 */
@media screen and (max-width: 980px) {
  #Header-pc {
    display: none;
  }
  #Header-mobile {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 55px;
    background-color: #fff;
    border-bottom: 1px solid #505166;
  }
  .logo {
    float: left;
    width: 55px;
    height: 55px;
    margin-left: 20px;
    line-height: 55px;
  }
  i {
    font-size: 24px;
  }
  .more {
    float: right;
    margin-right: 20px;
    line-height: 55px;
  }
  .application-list {
    position: absolute;
    top: 55px;
    width: 100%;
    list-style-type: none;
    z-index: 2;
    background-color: #fff;
  }
  .application-list li {
    width: 100%;
    height: 55px;
    line-height: 55px;
    text-indent: 2em;
    color: #606266;
  }
}
</style>

